{% extends "jb_admin/base.html" %}
{% load static %}
{% load jsonify %}

{% block page_content %}

<script type="text/javascript">

    extra_table_logic='{{ extra_table_logic }}'
    footer={{ footer |jsonify }}
    search_args={{ search_args | jsonify | default:'{}'  }}
    parents = {{ parents | jsonify | default:'[]' }}
    advise_heads = {{ advise_heads | jsonify | default:'[]' }}
    advise_heads_cookie_path= '{{ advise_heads_cookie_path }}' || null

    option= {{ option | jsonify }}
    table_layout={{ table_layout | jsonify }}
    selectable = {{ selectable | jsonify }}
    tableClass = "{{tableClass | default:'grey-head' }}"
    // 这个变量留着，兼容老的调用。。准备把它移除
//    tabs={{ tabs | jsonify | default:'[]' }}
//    named_tabs={{ named_tabs | jsonify | default:'{}' }}
    event_slots = {{ event_slots | jsonify | default:'[]' }}

    childStore_event_slot={{ childStore_event_slot | jsonify |default:'{}' }}
    fitWidth = {{ fitWidth | jsonify  }} || false
    //    eventBus = new Vue({})


    var base_table_store = {
        data:function(){
            return {
                selectable:selectable,
                parents:parents,
                page_label:page_label,
                heads:heads,
                rows:rows,
                row_filters:row_filters,
                row_sort:row_sort,
                row_pages:row_pages,
                director_name:director_name,
                footer:footer,
                ops:ops,
                search_args:search_args,
                tableClass:tableClass,
                //---------table_page---------
                tab_stack:[],
//                tabs:tabs,
//                named_tabs:named_tabs,
                //-------------------
                named_ctx:named_ctx,
                event_slots:event_slots,
                advise_heads:advise_heads,
                advise_heads_cookie_path:advise_heads_cookie_path,
                option:option,
                table_layout:table_layout,

            }
        },
        mixins:[table_store,table_page_store],

    }

    real_table_store = base_table_store
    root_store = new Vue({})

    table_logic={
        el:'#there',
        data:{
            childStore : new Vue(real_table_store),
            selectable:selectable,
            parents:parents,
            page_label:page_label,
            tr:cfg.tr,
            fitWidth:fitWidth,

        },
        //mixins:[mix_table_data,mix_ele_table_adapter],

        mounted:function(){
            var self=this
            this.childStore.vc=this
            ex.assign(this.op_funs,{
            })

//            eventBus.$on('switch_to_tab',this.op_funs.switch_to_tab)

            self.$on('operation',self.on_operation)
            Vue.nextTick(()=>{
                root_store.$on('switch-to-tab',this.open_stack_tab)
            })

        },
        computed:{
            pathable_tab_names:function(){
                var names =[]
                var last_stack=null
                ex.each(this.childStore.tab_stack,function(stack){
                    if(stack){
                        var last_crt_tab = ex.findone(stack.tabs,{name:stack.crt_tab_name})
//                        names.push(last_crt_tab.label)
                        if(stack.par_row._label){
                            names.push(last_crt_tab.label+"("+stack.par_row._label+")")
                        }else{
                            names.push(last_crt_tab.label)
                        }
                    }
//                    last_stack = stack
                })
                return names

            },

        },
        methods:{
            open_stack_tab(tab_ctx){
                this.childStore.tab_stack.push(tab_ctx)
            },
            pop_tab_stack(obj){
                this.childStore.tab_stack.pop()
                if(cfg._tab_call_back.length>0){
                    cfg._tab_call_back.pop()(obj)
                }
            },
//            on_td_event:function(e){
//                this.op_funs[e.name](e)
//            },
            on_tab_event:function(e){
                this.op_funs[e.name](e)
            },
            get_childs:function(par){
                this.search_args._par=par.value
                this.search()
            },


            get_tab_name:function(tabs){
                if(tabs==this.tabs){
                    return ''
                }else{
                    for(var k in this.named_tabs){
                        var tmp_tabs = this.named_tabs[k]
                        if(tmp_tabs == tabs){
                            return k
                        }
                    }
                    return 'No Name Found'
                }
            }

        }

    }


//     function update_cnt_size(){
// //        var cnt_ht =  Math.max( $(document).height(),window.innerHeight)
//         var cnt_ht =  window.innerHeight ;//$('body').height() ;//
//         const doc = document.documentElement
//
//         if(!search_args._embed){
//             // $('#there').height(cnt_ht -80)
//             doc.style.setProperty('--app-height', cnt_ht -80+'px')
//         }else{
//             // $('#there').height(cnt_ht)
//             doc.style.setProperty('--app-height', cnt_ht +'px')
//         }
//
//     }
    $(function () {
        // update_cnt_size()
        //
        // $(window).resize(function(){
        //     update_cnt_size()
        // });

        if(extra_table_logic){
            table_logic.mixins.push(window[extra_table_logic])
        }

        // table=new Vue(table_logic)
        live_root = new Vue(table_logic)


    })

</script>

{% block extra_head %}
{% endblock %}
<style>
    a[disabled] {
        color: gray;
        pointer-events: none;
    }
    .table th .cell{
        white-space:nowrap;
    }
    .el-table .has-gutter th>.cell{
        width: auto;
    }
</style>
<div id='there' class="flex-v">

    {% block flag %}
    <div v-if="page_label" class="page-label" style="border-left: 3px solid #3e8ebd;padding-left: 1em;margin-bottom: 5px;">
        <b v-text="page_label"></b>
        <span style="display: inline-block;width: 2em;"></span>
        <ol class="breadcrumb" style="display: inline-block;background-color: inherit;margin-bottom: 0;padding: 0"  v-show="pathable_tab_names.length >0 ">
            <li v-for="name in pathable_tab_names"><span v-text="name"></span></li>
        </ol>
        <button type="button"
                class="btn btn-warning btn-xs"
                v-show="childStore.tab_stack.length > 0"
                @click="pop_tab_stack()">
            <i class="fa fa-arrow-circle-o-left fa-lg"></i><span v-text="tr.back"></span></button>
    </div>


    {% endblock %}

    {% block tab-content %}
    <div id="main-page" class="rows-block flex-v flex-grow" v-show="childStore.tab_stack.length == 0">


        <com-d-table class="flex-grow"  :filter-heads='childStore.row_filters'
                     :table-rows="childStore.rows"
                     :table-heads="childStore.heads"
                     :row-sort="childStore.row_sort"
                     :row-pages="childStore.row_pages"
                     :advise-heads="childStore.advise_heads"
                     :advise-heads-cookie-path="childStore.advise_heads_cookie_path"
                     :director-name="childStore.director_name"
                     :operation-heads="childStore.ops"
                     :footer="childStore.footer"
                     :parents="childStore.parents"
                     :search-args="childStore.search_args"
                     :selectable="selectable"
                     :table-class="childStore.tableClass"
                     :fit-width="fitWidth"
                    ></com-d-table>

    </div>

    <div id="tab-wrap"  v-if="childStore.tab_stack.length>0" class="flex-grow" style="position: relative">
        <com-widget-stack ref="widget_stack" :ctx_list="childStore.tab_stack" @win-event="on_tab_event($event)"></com-widget-stack>
    </div>

    {% endblock %}

</div>
<style>
    .main-tab-content{

    }
    .fake-suit th{
        white-space: nowrap;
    }
    .main-page{
        overflow: auto;
    }
    #tab-wrap{
        overflow: auto;
    }
</style>
{% block extra %}
{% endblock %}
{% endblock %}